<template>
  <el-card shadow="never" class="rd-8 mb-8">
    <template #header>
      <div class="card-header f-c-c">{{ showMsg }}表单</div>
    </template>
    <el-steps :active="0" finish-status="success" align-center class="mb-40">
      <el-step title="课程基本信息" />
      <el-step title="章节基本信息" />
      <el-step title="发布课程" />
    </el-steps>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="课程标题" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入课程标题"
          maxlength="255"
        />
      </el-form-item>
      <el-form-item label="课程分类" prop="subjectId">
        <el-cascader
          class="w-300"
          v-model="subjectItem"
          :options="subjectOptions"
          :props="propsOptins"
          @change="(value) => handleChange(value as string[])"
        >
          <template #default="{ node, data }">
            <span>{{ data.title }}</span>
            <span v-if="!node.isLeaf">({{ data.children.length }})</span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="课程讲师" prop="teacherId" class="w-400px">
        <el-select v-model="form.teacherId" placeholder="请选择讲师">
          <el-option
            v-for="item in teacherList"
            :key="item.teacherId"
            :label="item.name"
            :value="item.teacherId as string"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="总课时" prop="lessonNum">
        <el-input-number v-model="form.lessonNum" :min="0" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input-number v-model="form.price" :min="0" :precision="2" />
      </el-form-item>
      <el-form-item label="浏览量" prop="viewNum">
        <el-input-number v-model="form.viewCount" :min="0" />
      </el-form-item>
      <el-form-item label="课程介绍" prop="description">
        <Editor v-model="form.description" />
      </el-form-item>
      <el-form-item label="课程封面" prop="coverUrl">
        <CropperCourse v-model="form.coverUrl" />
      </el-form-item>
    </el-form>
    <div class="flex justify-center mb-20">
      <el-button type="primary" @click="handleNext()">保存并下一步</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import CropperCourse from '@/components/CropperCourse/index.vue'
import Editor from '@/components/Editor/index.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Course } from '@/api/course/type'
import { useRoute, useRouter } from 'vue-router'
import {
  reqAddCourseInfo,
  reqCourseAndDescriptionByCourseId,
  reqUpdateCourseInfo,
} from '@/api/course'
import { Subject } from '@/api/subject/type'
import { reqSubjectTree } from '@/api/subject'
import { Teacher } from '@/api/teacher/type'
import { reqTeacherList } from '@/api/teacher'
let route = useRoute()
let router = useRouter()

let showMsg = computed(() => (form.value.courseId ? '编辑' : '添加'))
const propsOptins = { label: 'title', value: 'subjectId' }
const initForm: Course = {
  courseId: undefined,
  teacherId: undefined,
  subjectId: undefined,
  subjectPid: undefined,
  title: '',
  price: 0,
  lessonNum: undefined,
  coverUrl: undefined,
  buyCount: undefined,
  viewCount: undefined,
  status: '0',
  delFlag: '0',
}
const formRef = ref<FormInstance>()
let form = ref<Course>({ ...initForm })
const rules = reactive<FormRules>({
  title: [{ required: true, message: '课程标题不能为空', trigger: 'blur' }],
  subjectId: [{ required: true, message: '分类不能为空', trigger: 'blur' }],
  teacherId: [{ required: true, message: '讲师不能为空', trigger: 'blur' }],
  price: [{ required: true, message: '价格不能为空', trigger: 'blur' }],
  lessonNum: [{ required: true, message: '总课时不能为空', trigger: 'blur' }],
})
let subjectOptions = ref<Subject[]>([])
let subjectItem = ref<string[]>([])
let teacherList = ref<Teacher[]>([])

const getCourseAndDescriptionByCourseId = async (courseId: string) => {
  let { data } = await reqCourseAndDescriptionByCourseId(courseId)
  form.value = data
  subjectItem.value[0] = data.subjectPid
  subjectItem.value[1] = data.subjectId
}
const handleChange = (value: string[]) => {
  form.value.subjectId = value[1]
  form.value.subjectPid = value[0]
}
const getSubjectTree = async () => {
  let { data } = await reqSubjectTree()
  subjectOptions.value = data
}
const getTeacherList = async () => {
  let { data } = await reqTeacherList()
  teacherList.value = data
}
const handleNext = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      form.value.courseId
        ? await reqUpdateCourseInfo(form.value)
        : await reqAddCourseInfo(form.value)
      router.push(`/course/chapter/${form.value.courseId}`)
    }
  })
}

const init = () => {
  if (route.params && route.params.courseId) {
    getCourseAndDescriptionByCourseId(route.params.courseId as string) //调用根据 id查询的方法
  } else {
    form.value = { ...initForm }
  }
}
watch(
  () => route.params.courseId,
  () => init(),
  { immediate: true },
)
onMounted(() => {
  getSubjectTree()
  getTeacherList()
})
</script>

<style lang="scss" scoped>
.card-header {
  font-weight: 600;
  color: #3e454d;
  padding: 4px 13px 4px 12px;
}
</style>
